<template>
  <view class="content">
    <u-navbar @click="backIndex" back-icon-color="#fff" title-color="#fff" title="上传题库 " :background="background">
    </u-navbar>
    <view class="container_header">
      <view class="">
        <u-icon name="question-circle" class="question-circle"
          color="#17BE6B"></u-icon>请根据统一的EXCEL模版上传试题，否则可能导致试题无法识别导致上传失败。
      </view>
      <view class="">
        <u-icon name="question-circle" class="question-circle" color="#17BE6B"></u-icon>请勿上传违反国家法律法规内容，请勿上传公司内部涉密内容。
      </view>
    </view>
    <!--    <view class="container_header">
      <view class="container_header_tag">
        <u-tag v-for="(item, index) in categoryType" :text="item.label"
          :type="index === tagIndex ? 'warning' : 'success'" @click="handleTagClick(index,item)" />
      </view>
    </view> -->
    <!-- <view class="header">纯前端附件选择上传2.0</view> -->

    <!-- 		<view class="tab">
			<view :style="[{color: tabIndex==0? '#3F536E': '#999'}]" @click="onTab(0)">基本使用</view>
			<view :style="[{color: tabIndex==1? '#3F536E': '#999'}]" @click="onTab(1)">scroll内使用</view>
		</view>
		 -->
    <!-- 		<view>
			<view v-for="(item,index) in list" :key="index" class="padding">{{ item }}</view>
			<button style="margin: 30rpx;" @click="add">DOM重排测试</button>
			<button style="margin: 30rpx;" @click="open">nvue测试</button>
		</view> -->

    <view class="padding">
      <!-- <view>已选择文件列表：</view> -->
      <!-- 			<view style="font-weight: bold;padding: 30rpx 60rpx;">
			提示：App端只能使用组件内置方法上传文件，返回的path字段仅供用于图片视频类标签src属性(如下示例↓)，他用自行处理!!
			</view> -->
      <view v-for="(item,index) in files.values()" :key="index" class="fileInfo">
        <view class="">
          <view>文件名称：{{ item.name }}</view>
          <view style="margin-left: 10rpx;">大小：{{ item.size }}</view>
          <view style="margin-left: 10rpx;">状态：{{ item.type }}</view>
          <view style="margin-left: 10rpx;">进度：{{ item.progress }}</view>
          <view v-if="item.type=='fail'" style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;"
            @click="resetUpload(item.name)">重新上传</view>
        </view>
        <u-button size="mini" type="error" @click="clear(item.name)">删除</u-button>
      </view>
      <!-- #ifndef MP-WEIXIN -->
      <u-modal v-model="showFiles" title="上传结果" @confirm="confirm">
        <view v-for="(item,index) in files.values()" :key="index" class="uploadfileInfo">
          <view v-if="item.responseText" style="margin-left: 10rpx;">
            服务端返回演示：{{ item.responseText.msg? item.responseText.msg:'上传成功'}}</view>
          <view v-if="item.type=='fail'" style="margin-left: 10rpx;padding: 0 10rpx;border: 1rpx solid #007AFF;"
            @click="resetUpload(item.name)">重新上传</view>
        </view>
        <!-- <view>文件路径：{{ item.path }}</view> -->
      </u-modal>
      <!-- #endif -->

      <!-- #ifdef MP-WEIXIN -->
      <!--      <view v-for="(item,index) in wxFiles" :key="index">
        <text>{{ item.name }}</text>
        <text style="margin-left: 10rpx;">大小：{{ item.size }}</text>
        <text style="margin-left: 10rpx;">状态：{{ item.type }}</text>
        <text style="margin-left: 10rpx;">进度：{{ item.progress }}</text>
        <view>
          <button @click="resetUpload(item.name)">重新上传</button>
          <button @click="clear(item.name)">删除</button>
        </view>
      </view> -->
      <!-- #endif -->

    </view>

    <view v-show="tabIndex===0" class="padding">
      <lsj-upload ref="lsjUpload0" childId="upload1" :width="width" :height="height" :option="option" :size="size"
        :count="count" :formats="formats" :debug="debug" :instantly="instantly" @change="onChange"
        @progress="onprogress" @uploadEnd="onuploadEnd">
        <view class="submit_container">
          <u-image class="submit_img" width="80rpx" height="80rpx" src="../../static/images/paperItem.png"></u-image>
          <view class="">
            <view class="">
              Excel导入
            </view>
            <view class="submit_text">
              下载Excel模版，参考模版调整内容格式，然后上传导入。
            </view>
          </view>
        </view>
        <!-- <u-button type="warning">选择excel文件</u-button> -->
      </lsj-upload>
      <view class="" style="margin-top: 30rpx;">
        没有模版？<text style="color: #007AFF;" @click="downExcel">点此下载</text>Word模版
      </view>
      <!-- 			<view>
    		<view>此临时加的组件，只为演示选择文件后重新定位，点击显示出弹框就行，不要选择附件</view>
    		<lsj-upload
    		ref="lsjUpload2"
    		childId="upload3"
    		:width="width"
    		:height="height"
    		:option="option"
    		:size="size"
    		:formats="formats"
    		:debug="debug"
    		:instantly="instantly"
    		@change="onChange"
    		@progress="onprogress"
    		@uploadEnd="onuploadEnd"
    		>
    			<view class="btn" :style="{width: width,height: height}">选择附件2</view>
    		</lsj-upload>
    	</view> -->

    </view>
    <u-button class="btn" type="success" @click="upload">上传</u-button>


    <!-- 
    <view v-show="tabIndex===1">
      APP端因为webview层级比当前窗口文档流级别高，
      切换tab时应该把插件hide掉，切换回去再重新show
      <scroll-view scrollY style="height: 800rpx;" @scroll="onscroll">
        <view v-for="(val,k) in 30" :key="k">{{ val }}</view>
        <lsj-upload ref="lsjUpload1" childId="upload1" :width="width" :height="height" :option="option" :size="size"
          :multiple="multiple" :formats="formats" :debug="debug" :instantly="instantly" @change="onChange"
          @progress="onprogress" @uploadEnd="onuploadEnd">
          <view class="btn" :style="{width: width,height: height}">选择附件</view>
        </lsj-upload>
        <view v-for="(val2,j) in 30" :key="'j_'+j">{{ val2 }}</view>
      </scroll-view>


    </view> -->


    <!-- 		<view class="padding ts">
			<view>此次改版l-file，slot自定义样式，取消中间层</view>
			<view>不脱离文档流，跟随页面级滚动</view>
			<view>使用插件有疑问欢迎加入</view>
			<view>QQ交流群：看插件文档</view>
		</view> -->
    <u-modal :mask-close-able='true' v-model="choosePaper" :show-cancel-button='true' title="选择模版"
      @confirm="handlechoosePaper">
      <view class="slot-content">
        <view class="container_popup_text">
          <u-radio-group @change="radioGroupChange">
            <u-radio @change="radioChange" v-for="(item, index) in listExcel" :key="index" :name="item.name"
              :disabled="item.disabled">
              {{item.name}}
            </u-radio>
          </u-radio-group>
        </view>
      </view>
    </u-modal>
    <u-toast ref="uUploadToast" />

  </view>
</template>

<script>
  import store from '@/store/modules/user.js';
  import {
    getAccessToken,
  } from '@/utils/auth'
  import {
    downPersonExcelAPI
  } from '@/api/addPaper/addpaper.js'
  export default {
    data() {
      return {
        listExcel: [{
            name: '模版一',
            disabled: false
          },
          {
            name: '模版二',
            disabled: false
          },
        ],
        choosePaper: false,
        templateId: '',
        showFiles: false,
        handlePractice: false,
        tagIndex: '',
        tagType: '竞赛学习',
        background: {
          backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
        },
        // 上传接口参数
        option: {
          // 上传服务器地址，需要替换为你的接口地址
          url: 'http://cloud.swaychip.com:38093/admin-api/app/practice/question-bank/import',
          // 上传附件的key
          name: 'file',
          // 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
          header: {
            // 示例参数可删除
            'Authorization': 'Bearer ' + getAccessToken(),
          },
          // 根据你接口需求自定义body参数
          formData: {
            name: '',
            // categoryId: ''
          }
        },
        // 选择文件后是否立即自动上传，true=选择后立即上传
        instantly: false,
        // 必传宽高且宽高应与slot宽高保持一致
        width: '100%',
        height: '150rpx',
        // 限制允许上传的格式，空串=不限制，默认为空
        formats: '',
        // 文件上传大小限制
        size: 30,
        // 文件数量限制
        count: 1,
        // 是否多选
        multiple: true,
        // 文件回显列表
        files: new Map(),
        // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
        wxFiles: [],
        // 是否打印日志
        debug: true,
        // 演示用
        tabIndex: 0,
        list: [],
        paperName: '',
        isUploaded: false, // 添加isUploaded变量
      }
    },
    computed: {
      categoryType() {
        return store.state.categoryType
      }
    },
    created() {
      this.$store.dispatch('getCategoryType')

    },
    onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
      this.paperName = option.nameFile
    },
    onReady() {
      setTimeout(() => {
        console.log('----演示动态更新参数-----');
        // this.$refs['lsjUpload' + this.tabIndex].setData('formData.orderId', '动态设置的参数');

        console.log('以下注释内容为-动态更新参数更多演示，放开后可查看演示效果');
        // 修改option对象的name属性
        // this.$refs.lsjUpload.setData('name','myFile');

        // 修改option对象的formData内的属性
        this.$refs.lsjUpload0.setData('formData.name',this.paperName);

        // 替换option对象的formData
        // this.$refs.lsjUpload.setData('formData',{appid:'222'});

        // option对象的formData新增属性
        // this.$refs.lsjUpload.setData('formData.newkey','新插入到formData的属性');


        // ---------演示初始化值，用于已提交后再次编辑时需带入已上传文件-------
        // 方式1=传入数组
        // let files1 = [{name: '1.png'},{name: '2.png',}];

        // 方式2=传入Map对象
        // let files2 = new Map();
        // files2.set('1.png',{name: '1.png'})

        // 此处调用setFiles设置初始files
        // this.$refs.lsjUpload.setFiles(files1);

        // 初始化tab
        this.onTab(0);
      }, 2000)
    },
    methods: {
      downExcel() {
        this.choosePaper = true
      },
      async handlechoosePaper() {
        // 下载文件资源到本地
        uni.downloadFile({
          url: 'http://cloud.swaychip.com:38093/admin-api/app/practice/question-bank/get-import-template?templateId=' +
            this.templateId,
          header: {
            'Authorization': 'Bearer ' + getAccessToken() // 将token添加到请求头中
          },
          success: function(res) {
            // 文件到本地
            uni.saveFile({
              // tempFilePath: res.tempFilePath, //临时路径
              success: function(data) {
                // var savedFilePath = data.savedFilePath
                // 在app端执行
                // #ifdef APP-PLUS
                let osname = plus.os.name
                // 如果是安卓的话弹出提示
                if (osname == 'Android') {
                  uni.showToast({
                    icon: 'none',
                    mask: true,
                    title: '保存成功',
                    duration: 1000
                  })
                }
                // #endif
                //ios手机直接打开文件，手动存储文件到手机，Android手机从根目录创建文件夹，保存文件并改名
                setTimeout(() => {
                  //打开文档查看
                  uni.openDocument({
                    filePath: data.savedFilePath,
                    success: function(ress) {
                      console.log("成功打开文件")
                    },
                    fail() {
                      console.log("打开文件失败")
                    }
                  })
                }, 1000)
              }
            })
            console.log('下载成功');

          },
          fail: function(res) {
            console.log(res.errMsg);
          },
          complete: function(res) {
            console.log(res.statusCode);
          },
          progress: function(res) {
            console.log('下载进度' + res.progress);
          }
        });


      },
      submitHandle() {

      },
      // 选中某个单选框时，由radio时触发
      radioChange(e) {
        console.log(e);
        this.templateId = e === '模版一' ? 1 : e === '模版二' ? 2 : ''
      },
      // 选中任一radio时，由radio-group触发
      radioGroupChange(e) {
        // console.log(e);
      },
      confirm() {
        uni.navigateTo({
          url: '../../pages/goIndex/goIndex'
        })
      },
      handleTagClick(index, item) {
        console.log(item, 'item');
        this.tagIndex = index;
        this.tagType = item.label
        this.categoryId = item.value
        // this.option.formData.categoryId = this.categoryId
      },
      // 某文件上传结束回调(成功失败都回调)
      onuploadEnd(item) {
        console.log(`${item.name}已上传结束，上传状态=${item.type}`);

        // 更新当前窗口状态变化的文件
        this.files.set(item.name, item);

        // ---可删除--演示上传完成后取服务端数据
        if (item['responseText']) {
          console.log('演示服务器返回的字符串JSON转Object对象');
          this.files.get(item.name).responseText = JSON.parse(item.responseText);
        }

        // 微信小程序Map对象for循环不显示，所以转成普通数组，
        // 如果你用不惯Map对象，也可以像这样转普通数组，组件使用Map主要是避免反复文件去重操作
        // #ifdef MP-WEIXIN
        this.wxFiles = [...this.files.values()];
        // #endif

        // 强制更新视图
        this.$forceUpdate();
        if (item.type === "success") {
          this.showFiles = true
        }


        // ---可删除--演示判断是否所有文件均已上传成功
        let isAll = [...this.files.values()].find(item => item.type !== 'success');
        if (!isAll) {
          console.log('已全部上传完毕');
        } else {
          console.log(isAll.name + '待上传');
        }

      },
      // 上传进度回调
      onprogress(item) {
        // 更新当前状态变化的文件
        this.files.set(item.name, item);
        console.log('打印对象', JSON.stringify(this.files.get(item.name)));
        // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
        // #ifdef MP-WEIXIN
        this.wxFiles = [...this.files.values()];
        // #endif

        // 强制更新视图
        this.$forceUpdate();

      },
      // 文件选择回调
      onChange(files) {
        console.log('当前选择的文件列表：', JSON.stringify([...files.values()]));
        // 更新选择的文件 
        this.files = files;
        // 强制更新视图
        this.$forceUpdate();
        if (this.files) {
          this.isUploaded = true; // 设置isUploaded为true
        }
        // 微信小程序Map对象for循环不显示，所以转成普通数组，不要问为什么，我也不知道
        // #ifdef MP-WEIXIN
        this.wxFiles = [...this.files.values()];
        // #endif

        // ---可删除--演示重新定位覆盖层控件
        this.$nextTick(() => {
          console.log('演示重新定位 (提示：像示例里文件列表在按钮上方时就需要插入文件后更新webview位置)');
          // 直接更新当前页面所有上传组件webview位置
          uni.$emit('$upload-show', {});

          // 也可以通过以下方式指定更新ref对应组件位置
          // this.$refs.lsjUpload0.show();
          // this.$refs.lsjUpload1.show();
          // this.$refs.lsjUpload2.show();
        });

      },
      // 手动上传
      upload() {
        // if (!this.categoryId) {
        //   this.$refs.uUploadToast.show({
        //     title: '请选择试题种类',
        //     type: 'error',
        //   })
        //   return
        // }
        // this.option.formData.name = this.paperName
        if (!this.isUploaded) {
          this.$refs.uUploadToast.show({
            title: '请上传文件',
            type: 'error',
          });
          return;
        }
        if (!this.option.formData.name) {
          this.$refs.uUploadToast.show({
            title: '请填写题库名称',
            type: 'error',
          });
          return;
        }
        // name=指定文件名，不指定则上传所有type等于waiting和fail的文件
        console.log(this.tabIndex,'this.tabIndex');
        this.$refs['lsjUpload' + this.tabIndex].upload();
      },
      // 指定上传某个文件
      resetUpload(name) {
        this.$refs['lsjUpload' + this.tabIndex].upload(name);
      },
      // 移除某个文件
      clear(name) {
        // name=指定文件名，不传name默认移除所有文件
        this.$refs['lsjUpload' + this.tabIndex].clear(name);
      },
      // ---可删除--演示在scroll中，scroll滚动后重新定位webview
      onscroll() {
        // #ifdef APP
        if (this.scrollTime) {
          clearTimeout(this.scrollTime);
        }
        this.scrollTime = setTimeout(() => {
          console.log('scroll结束调用show()');
          this.$refs.lsjUpload1.show();
        }, 500)
        // #endif
      },
      /**
       * ---可删除--演示在组件上方添加新内容DOM变化
       */
      add() {
        this.list.push('DOM重排测试');
        // #ifdef APP
        this.$nextTick(() => {
          // 更新当前页所有上传组件在页面中的位置
          uni.$emit('$upload-show', {});
        })
        // #endif
      },
      /**
       * ---可删除--演示Tab切换时覆盖层是否能被点击
       * APP端因为是webview，层级比view高，此时若不希望点击触发选择文件，需要手动调用hide()
       * 手动调用hide后，需要调用show()才能恢复覆盖层的点击
       */
      onTab(tabIndex) {
        // 隐藏所有的控件（透明层）
        uni.$emit('$upload-hide', {});

        this.tabIndex = tabIndex;
        // 显示允许点击的控件（透明层）
        this.$nextTick(() => {
          this.$refs['lsjUpload' + this.tabIndex].show();
        })

      },
      /**
       * 打开nvue窗口查看非跟随窗口滚动效果
       */
      open() {
        uni.navigateTo({
          url: '/pages/nvue-demo/nvue-demo'
        });
      }
    }
  }
</script>

<style>
  .fileInfo {
    padding: 20rpx;
    line-height: 50rpx;
    background-color: aliceblue;
    border-radius: 20rpx;
    display: flex;


  }

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 130rpx;
    line-height: 130rpx;
    text-align: center;
    font-size: 32rpx;
    background-color: #3F536E;
    color: #fff;
    z-index: 9999;
  }

  .content {
    /* padding-top: 130rpx; */
  }

  .flex {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .inputs {
    height: 100rpx;
    border-bottom: 1rpx solid #808080;
  }

  .padding {
    padding-top: 30rpx;
    padding-left: 30rpx;
    padding-bottom: 50rpx;
  }

  .tab {
    display: flex;
    padding: 30rpx;
  }

  .tab view {
    height: 100rpx;
    line-height: 100rpx;
    flex: 1;
    text-align: center;
    border: 1rpx solid #2C405A;
  }


  .ts {
    line-height: 2em;
  }

  .nbtn {
    margin: 100rpx 50rpx;
  }

  .container_header {

    margin-top: 10rpx;
    margin-bottom: 100rpx;
    padding: 20rpx;
    margin: 20rpx;
    background-color: aliceblue;
    border-radius: 20rpx;

    .container_header_tag {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      /* text-align: center; */

      .u-tag {
        width: 140rpx;
        margin: 5px;
        /* 根据需要调整间距 */
      }
    }

    .question-circle {
      margin-right: 20rpx;
      font-size: 30rpx;
    }
  }

  .uploadfileInfo {
    margin: 30rpx;

  }

  .btn {
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .submit_container {
    display: flex;
    justify-content: space-evenly;
    border: 1px solid #000;
    padding: 20rpx;

    .submit_img {
      margin-right: 20rpx;
    }

    .submit_text {
      font-size: 20rpx;
      color: darkgray;
      margin-top: 30rpx;
    }
  }

  .container_popup_text {
    text-align: center;
    margin: 20rpx 0;
  }
</style>